<template>
  <div class="lists-container">
    <!-- 面包屑导航 -->
    <div class="bread container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <Transition name="move" appear mode="out-in">
          <el-breadcrumb-item :key="name">{{ name }}</el-breadcrumb-item>
        </Transition>
      </el-breadcrumb>
    </div>

    <div class="lists container">
      <el-row>
        <!-- 内容列表 -->
        <el-col :lg="18" :md="18">
          <div style="opacity: 0" v-if="!list.length">1</div>
          <el-empty description="暂无内容~" v-if="!list.length && !loading" />
          <template v-else>
            <el-col :lg="12" :md="12" v-for="item in list" :key="item.id" class="item">
              <el-card :body-style="{ padding: '0' }">
                <RouterLink :to="`/detail/${item.id}`" class="card-pic">
                  <img :src="baseURL + item.image" alt="" />
                  <span class="mask">
                    <i class="el-icon-search" />
                  </span>
                </RouterLink>
                <div class="info">
                  <span class="date">
                    <i class="el-icon-date" />
                    {{ item.created_at.slice(0, 10) }}
                  </span>
                  <span class="count">
                    <i class="el-icon-chat-round" />
                    {{ item.count || '暂无评论' }}
                  </span>
                </div>
                <RouterLink :to="`/detail/${item.id}`" class="title">{{ item.title }}</RouterLink>
                <RouterLink :to="`/detail/${item.id}`" class="more">阅读更多</RouterLink>
              </el-card>
            </el-col>
          </template>
        </el-col>

        <!-- 热门内容 -->
        <el-col :lg="6" :md="6">
          <MyHot />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MyHot from '@/components/MyHot'
import { reqContentByCid } from '@/api'
import { baseURL } from '@/utils/request'

export default {
  name: 'Lists',
  components: { MyHot },
  data() {
    return {
      name: '',
      baseURL: baseURL + 'upload/',
      list: [],
      loading: false
    }
  },
  methods: {
    async getListByCid() {
      this.loading = true
      // 获取路由参数
      const { cid } = this.$route.params
      // 获取列表数据
      const { data: res } = await reqContentByCid(cid)
      this.loading = false
      this.list = res.body
      this.name = res.name
    }
  },
  watch: {
    $route: {
      handler() {
        this.getListByCid()
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.lists-container {
  min-height: 800px;
}

.lists {
  padding-top: 20px;
}

.item {
  padding-right: 40px;
}

.bread {
  display: flex;
  align-items: center;
  height: 50px;
}

.el-card {
  .card-pic {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;

    &:hover {
      .mask {
        opacity: 1;

        i {
          transform: translateY(0);
        }
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      transition: all 0.35s;

      i {
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        border-radius: 50%;
        color: #fff;
        background-color: @primaryColor;
        transform: translateY(50%);
        transition: all 0.35s;
      }
    }
  }

  img {
    width: 100%;
    height: 250px;
  }

  .more {
    font-size: 12px;

    &:hover {
      color: @primaryColor;
    }
  }

  .info {
    font-size: 14px;
    margin: 16px 0 10px 0;
    padding: 0 10px;

    .count {
      margin-left: 25px;
    }
  }

  .title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    margin-bottom: 10px;
    padding: 0 10px;
  }

  .more {
    display: block;
    height: 49px;
    line-height: 49px;
    text-align: center;
    font-size: 16px;
    background-color: #fff;
    border-top: 1px solid #ebeef5;

    &:hover {
      background-color: @primaryColor;
      color: #fff;
    }
  }
}
</style>
